<template>
  <div class="full c">
    <!-- Header -->
    <div class="w_full h_60 lh_50">
      <Header :headerName="headerName" :headerStyle="headerStyle" />
    </div>

    <!-- body -->
    <div class="w_full h_full-60 flex_row_around pb_15">
      <!-- 1 -->
      <div class="w_32_p flex_column_between gap_10">
        <div class="w_full h_32_p box_bgi p_10">
          <div class="chart_title"><span>基本信息</span></div>
          <div class="w_full h_full-25 color_fff">
            <div class="w_full flex_row_between mb_10 ml_30 mt_10">
              <div class="w_50_p">品种: 西门塔尔牛</div>
              <div class="w_50_p">毛色：红白花</div>
            </div>

            <div class="w_full flex_row_between mb_10 ml_30 mt_10">
              <div class="w_50_p">出生日期: 2021-03-15</div>
              <div class="w_50_p">月龄: 12月</div>
            </div>

            <div class="w_full flex_row_between mb_10 ml_30 mt_10">
              <div class="w_50_p">是否有角: 是</div>
              <div class="w_50_p">免疫疫苗: 口蹄疫，疯牛疫</div>
            </div>

            <div class="w_full flex_row_between mb_10 ml_30 mt_10">
              <div class="w_50_p">育种次数: 2 </div>
              <div class="w_50_p">防疫次数: 2</div>
            </div>
          </div>
        </div>

        <!-- 饲料配方 -->
        <div class="w_full h_32_p box_bgi p_10">
          <div class="chart_title"><span>饲料配方</span></div>
          <div class="w_full h_full-25 color_fff ph_10">
            <div class="w_full flex_row_around mt_10">
              <div class="flex_1 main_color text_left">浓缩饲料</div>
              <div class="flex_1 text_center">当天费用： ￥1.40</div>
              <div class="flex_1 text_center">周期费用： ￥58.40</div>
            </div>

            <div class="w_full flex_row_around mt_10">
              <div class="flex_1 main_color text_left">豆饼</div>
              <div class="flex_1 text_center">当天费用： ￥1.90</div>
              <div class="flex_1 text_center">周期费用： ￥42.40</div>
            </div>
          </div>
        </div>

        <!-- 育种信息 -->
        <div class="w_full h_32_p box_bgi p_10">
          <div class="chart_title"><span>育种信息</span></div>
          <div class="w_full h_full-25 p_10 flex_row_start">
            <div class="img_box w_30_p">
              <img class="w_90_p border_radius_10 object_fit_cover" src="../assets/images/img/niu-du.png" alt="">
            </div>
            <div class="w_70_p ph_10 color_fff">
              <div class="mb_10">
                育种编号：1000111
                <span class="ml_30 cursor" @click="goToYuZhongYuanPage()">育种员：那申</span>
              </div>
              <div class="mb_10">育种日期：2021.1.13 <span class="ml_30"></span></div>
              <div class="mb_10">出生日期：2021.9.15</div>
              <div class="mb_10">牛犊性别：公</div>
              <div class="mb_10">牛犊体重：40kg</div>
              <div class="mb_10">健康状况：<span class="color_green">良好</span> </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 2 -->
      <div class="w_32_p flex_column_between gap_10">
        <div class="w_full h_50_p p_10 flex_center box_bgi">
          <img class="h_full border_radius_10 cursor object_fit_cover" src="../assets/images/img/cattle.gif" alt="">
        </div>

        <div class="w_full h_50_p p_10 box_bgi">
          <div class="chart_title"><span>谱系档案</span></div>
          <div class="w_full h_full-25">
            <PedigreeTree :chartData="chartData" />
          </div>
        </div>
      </div>

      <!-- 3 -->
      <div class="w_32_p flex_column_between gap_10">
        <!-- 成长记录 -->
        <div class="w_full h_32_p box_bgi p_10">
          <div class="chart_title"><span>成长记录</span></div>

          <div class="p_5 flex_row_around color_fff" ref="tabName">
            <div class="grow_name cursor" :class="{ 'main_color': growIndex == index }"
              v-for="(item, index) in chengZhangJiLu" :key="index" @click="changeGrowIndex(index)"
              @mousewheel="wheelScroll">
              {{ item.name }}
            </div>
          </div>

          <div class="w_full-50 color_fff">
            <div class="w_full mb_10 ml_30 mt_10">
              <div>身高: {{ chengZhangJiLu[growIndex].shenGao }}</div>
              <div>体重: {{ chengZhangJiLu[growIndex].weight }}</div>
            </div>
            <div class="w_full mb_10 ml_30 mt_10">
              <div>十字部高: {{ chengZhangJiLu[growIndex].shiZiBu }}</div>
              <div>体斜长: {{ chengZhangJiLu[growIndex].tiXieChang }}</div>

            </div>
            <div class="w_full mb_10 ml_30 mt_10">
              <div>胸围: {{ chengZhangJiLu[growIndex].xiongWei }}</div>
              <div>腹围: {{ chengZhangJiLu[growIndex].fuWei }}</div>
            </div>
            <div class="mb_10 ml_30 mt_10">测量日期: {{ chengZhangJiLu[growIndex].date }}</div>
          </div>
        </div>

        <!-- 防疫记录 -->
        <div class="w_full h_32_p box_bgi p_10">
          <div class="chart_title"><span>防疫信息</span></div>
          <div class="w_full h_full-25 color_fff">
            <p class="mb_10 ml_30 mt_10">2024.2.5 -- 口啼疫 -- 已接种 </p>
            <p class="mb_10 ml_30 mt_10">2024.3.12 -- 高致病性禽流感 -- 已接种</p>
            <p class="mb_10 ml_30 mt_10">2023.11.21 -- 布病 -- 已接种</p>
          </div>
        </div>

        <!-- 治疗记录 -->
        <div class="w_full h_32_p box_bgi p_10">
          <div class="chart_title"><span>治疗信息</span></div>
          <div class="w_full h_full-25 color_fff">
            <p class="mb_10 ml_30 mt_10">2023.10.2 -- 牛结核病 -- 注射药物名称 </p>
            <p class="mb_10 ml_30 mt_10">2024.3.12 -- 疯牛病 -- 注射药物名称</p>
            <p class="mb_10 ml_30 mt_10">2024.3.21 -- 口啼疫 -- 注射药物名称</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import Header from '../common/Header.vue'
import PedigreeTree from '../common/PedigreeTree.vue'
import DataChart from '../components/data-chart/index.vue'
import { ref, reactive, computed, onMounted, watch, provide, nextTick } from 'vue'
import screenfull from 'screenfull'

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const headerName = ref('牲畜信息')
const headerStyle = reactive({
  color: '#00A295',
  fontWeight: 500,
  fontSize: '20px'
})

const growIndex = ref(0)
const chengZhangJiLu = reactive([
  {
    name: '出生期',
    shenGao: '102cm',
    weight: '52.13kg',
    shiZiBu: '29cm',
    tiXieChang: '118cm',
    xiongWei: '39cm',
    fuWei: '31cm',
    date: '2021-04-03'
  },
  {
    name: '6月',
    shenGao: '119cm',
    weight: '60kg',
    shiZiBu: '32cm',
    tiXieChang: '120cm',
    xiongWei: '43cm',
    fuWei: '39cm',
    date: '2021-10-15'
  },
  {
    name: '1年',
    shenGao: '124cm',
    weight: '68kg',
    shiZiBu: '41cm',
    tiXieChang: '138cm',
    xiongWei: '51cm',
    fuWei: '41cm',
    date: '2022-03-10'
  },
  {
    name: '2年',
    shenGao: '143cm',
    weight: '74kg',
    shiZiBu: '50cm',
    tiXieChang: '148cm',
    xiongWei: '60cm',
    fuWei: '47cm',
    date: '2023-04-11'
  },
  {
    name: '3年',
    shenGao: '153cm',
    weight: '78kg',
    shiZiBu: '55cm',
    tiXieChang: '158cm',
    xiongWei: '63cm',
    fuWei: '57cm',
    date: '2024-01-04'
  },
])

const chartData = reactive({
  nodes: [
    { "id": "17552", "label": "牛编号: 1008", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "3178", "cattleId": 1008, "hornType": "nothing", "wanQu": "W", "tiLength": "76", "leaveType": "one_leave", "xiDu": "66", "maoLength": 12, "maoCount": "9.2", "height": "72", "chest": "100", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 50, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 40.8, "rfid": "3178", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716128918501/33a4c9e96d3e44e29ec4eb0f17309d76.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 460, "y": -157.5, "layoutOrder": 0, "_order": 1 },
    { "id": "18449", "label": "牛编号: 1905", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "81885", "cattleId": 1905, "hornType": "nothing", "wanQu": "W", "tiLength": "70", "leaveType": "one_leave", "xiDu": "66", "maoLength": 11, "maoCount": "9.4", "height": "66", "chest": "89", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 48, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 38.6, "rfid": "81885", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716082380586/3f22b789e5c34c4b9d6f704472edf8cd.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 140, "y": -110, "layoutOrder": 0, "_order": 2 },
    { "id": "18340", "label": "牛编号: 1796", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "70216", "cattleId": 1796, "hornType": "nothing", "wanQu": "W", "tiLength": "71", "leaveType": "one_leave", "xiDu": "66", "maoLength": 11, "maoCount": "5.3", "height": "67", "chest": "89", "density": "M", "touMao": "T", "sex": 1, "oilSweat": "H", "weight": 46, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 40.7, "rfid": "70216", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716128157162/17e22d2add1a40ad9377169e309b3e35.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#f07c7c", "sex": "母", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 140, "y": -205, "layoutOrder": 0, "_order": 1 },
    { "id": "16581", "label": "牛编号: 35", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "30195", "cattleId": 35, "hornType": "nothing", "wanQu": "W", "tiLength": "73", "leaveType": "one_leave", "xiDu": "66", "maoLength": 9, "maoCount": "6.2", "height": "69", "chest": "90", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 59.8, "farmId": "1780420223883542528", "birthDate": "2024-02-29T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2024-02-29T16:00:00.000+00:00", "netWeight": 53.6, "rfid": "E2801191A00000001BB1F43C", "isSheep": 1, "imgList": ["/profile/upload/media/2024/7/26/1721961068308/f5451966a46d4346a600c4856ff55b52.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "当前羊", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": -500, "y": -157.5, "layoutOrder": 0, "_order": 0 },
    { "id": "19014", "label": "牛编号: 2470", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "11442", "cattleId": 2470, "hornType": "nothing", "wanQu": "W", "tiLength": "74", "leaveType": "extra_leave", "xiDu": "70", "maoLength": 13, "maoCount": "5.6", "height": "72", "chest": "90", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 46, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 40.4, "rfid": "11442", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716082352407/0bc2eba42f344f3da8286ff89a87bfb9.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": -180, "y": -62.5, "layoutOrder": 0, "_order": 1 },
    { "id": "19159", "label": "牛编号: 2615", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "91354", "cattleId": 2615, "hornType": "nothing", "wanQu": "W", "tiLength": "78", "leaveType": "extra_leave", "xiDu": "70", "maoLength": 10, "maoCount": "5.6", "height": "74", "chest": "97", "density": "M", "touMao": "T", "sex": 1, "oilSweat": "H", "weight": 47, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 41.4, "rfid": "91354", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716121487676/48d1a12da88b4996853b4b0db221c227.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#f07c7c", "sex": "母", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": -180, "y": -252.5, "layoutOrder": 0, "_order": 0 },
    { "id": "17673", "label": "牛编号: 1129", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "1043", "cattleId": 1129, "hornType": "nothing", "wanQu": "W", "tiLength": "76", "leaveType": "one_leave", "xiDu": "0", "maoLength": 0, "maoCount": "6.2", "height": "72", "chest": "100", "density": "M", "touMao": "T", "sex": 1, "oilSweat": "H", "weight": 62, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 55.8, "rfid": "1043", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716121860401/1ec352258a0a454a9e25f3f2949b5ac5.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#f07c7c", "sex": "母", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 460, "y": -252.5, "layoutOrder": 0, "_order": 0 },
    { "id": "17977", "label": "牛编号: 1433", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "OM101", "cattleId": 1433, "hornType": "nothing", "wanQu": "W", "tiLength": "86", "leaveType": "one_leave", "xiDu": "80", "maoLength": 12, "maoCount": "9.5", "height": "83", "chest": "108", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 95, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 85.5, "rfid": "OM101", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716082526215/c008666a14c04caf855c323687fd7034.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 460, "y": 32.5, "layoutOrder": 0, "_order": 3 },
    { "id": "17705", "label": "牛编号: 1161", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "1197", "cattleId": 1161, "hornType": "nothing", "wanQu": "W", "tiLength": "78", "leaveType": "one_leave", "xiDu": "13", "maoLength": 12, "maoCount": "6.7", "height": "74", "chest": "110", "density": "M", "touMao": "T", "sex": 1, "oilSweat": "H", "weight": 70, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 63.3, "rfid": "1197", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716082501247/b1bdc3043e6c43599cfbaa88923c9022.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#f07c7c", "sex": "母", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 460, "y": -62.5, "layoutOrder": 0, "_order": 2 },
    { "id": "17978", "label": "牛编号: 1434", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "OM815", "cattleId": 1434, "hornType": "nothing", "wanQu": "W", "tiLength": "85", "leaveType": "one_leave", "xiDu": "70", "maoLength": 11, "maoCount": "10.6", "height": "81", "chest": "105", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 95, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 84.4, "rfid": "OM815", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716128133449/62e07de1ea7546d988e7eeeeba2a4271.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 140, "y": -300, "layoutOrder": 0, "_order": 0 },
    { "id": "18910", "label": "牛编号: 2366", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "81316", "cattleId": 2366, "hornType": "nothing", "wanQu": "W", "tiLength": "73", "leaveType": "extra_leave", "xiDu": "70", "maoLength": 10, "maoCount": "6.7", "height": "70", "chest": "85", "density": "M", "touMao": "T", "sex": 1, "oilSweat": "H", "weight": 47, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 40.3, "rfid": "81316", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716082484713/ef98512ac1424e7f8540760348b746fe.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#f07c7c", "sex": "母", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 140, "y": -15, "layoutOrder": 0, "_order": 3 }
  ],
  edges: [
    { "id": "17552", "label": "牛编号: 1008", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "3178", "cattleId": 1008, "hornType": "nothing", "wanQu": "W", "tiLength": "76", "leaveType": "one_leave", "xiDu": "66", "maoLength": 12, "maoCount": "9.2", "height": "72", "chest": "100", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 50, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 40.8, "rfid": "3178", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716128918501/33a4c9e96d3e44e29ec4eb0f17309d76.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 460, "y": -157.5, "layoutOrder": 0, "_order": 1 },
    { "id": "18449", "label": "牛编号: 1905", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "81885", "cattleId": 1905, "hornType": "nothing", "wanQu": "W", "tiLength": "70", "leaveType": "one_leave", "xiDu": "66", "maoLength": 11, "maoCount": "9.4", "height": "66", "chest": "89", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 48, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 38.6, "rfid": "81885", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716082380586/3f22b789e5c34c4b9d6f704472edf8cd.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 140, "y": -110, "layoutOrder": 0, "_order": 2 },
    { "id": "18340", "label": "牛编号: 1796", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "70216", "cattleId": 1796, "hornType": "nothing", "wanQu": "W", "tiLength": "71", "leaveType": "one_leave", "xiDu": "66", "maoLength": 11, "maoCount": "5.3", "height": "67", "chest": "89", "density": "M", "touMao": "T", "sex": 1, "oilSweat": "H", "weight": 46, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 40.7, "rfid": "70216", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716128157162/17e22d2add1a40ad9377169e309b3e35.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#f07c7c", "sex": "母", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 140, "y": -205, "layoutOrder": 0, "_order": 1 },
    { "id": "16581", "label": "牛编号: 35", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "30195", "cattleId": 35, "hornType": "nothing", "wanQu": "W", "tiLength": "73", "leaveType": "one_leave", "xiDu": "66", "maoLength": 9, "maoCount": "6.2", "height": "69", "chest": "90", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 59.8, "farmId": "1780420223883542528", "birthDate": "2024-02-29T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2024-02-29T16:00:00.000+00:00", "netWeight": 53.6, "rfid": "E2801191A00000001BB1F43C", "isSheep": 1, "imgList": ["/profile/upload/media/2024/7/26/1721961068308/f5451966a46d4346a600c4856ff55b52.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "当前羊", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": -500, "y": -157.5, "layoutOrder": 0, "_order": 0 },
    { "id": "19014", "label": "牛编号: 2470", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "11442", "cattleId": 2470, "hornType": "nothing", "wanQu": "W", "tiLength": "74", "leaveType": "extra_leave", "xiDu": "70", "maoLength": 13, "maoCount": "5.6", "height": "72", "chest": "90", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 46, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 40.4, "rfid": "11442", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716082352407/0bc2eba42f344f3da8286ff89a87bfb9.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": -180, "y": -62.5, "layoutOrder": 0, "_order": 1 },
    { "id": "19159", "label": "牛编号: 2615", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "91354", "cattleId": 2615, "hornType": "nothing", "wanQu": "W", "tiLength": "78", "leaveType": "extra_leave", "xiDu": "70", "maoLength": 10, "maoCount": "5.6", "height": "74", "chest": "97", "density": "M", "touMao": "T", "sex": 1, "oilSweat": "H", "weight": 47, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 41.4, "rfid": "91354", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716121487676/48d1a12da88b4996853b4b0db221c227.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#f07c7c", "sex": "母", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": -180, "y": -252.5, "layoutOrder": 0, "_order": 0 },
    { "id": "17673", "label": "牛编号: 1129", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "1043", "cattleId": 1129, "hornType": "nothing", "wanQu": "W", "tiLength": "76", "leaveType": "one_leave", "xiDu": "0", "maoLength": 0, "maoCount": "6.2", "height": "72", "chest": "100", "density": "M", "touMao": "T", "sex": 1, "oilSweat": "H", "weight": 62, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 55.8, "rfid": "1043", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716121860401/1ec352258a0a454a9e25f3f2949b5ac5.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#f07c7c", "sex": "母", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 460, "y": -252.5, "layoutOrder": 0, "_order": 0 },
    { "id": "17977", "label": "牛编号: 1433", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "OM101", "cattleId": 1433, "hornType": "nothing", "wanQu": "W", "tiLength": "86", "leaveType": "one_leave", "xiDu": "80", "maoLength": 12, "maoCount": "9.5", "height": "83", "chest": "108", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 95, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 85.5, "rfid": "OM101", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716082526215/c008666a14c04caf855c323687fd7034.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 460, "y": 32.5, "layoutOrder": 0, "_order": 3 },
    { "id": "17705", "label": "牛编号: 1161", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "1197", "cattleId": 1161, "hornType": "nothing", "wanQu": "W", "tiLength": "78", "leaveType": "one_leave", "xiDu": "13", "maoLength": 12, "maoCount": "6.7", "height": "74", "chest": "110", "density": "M", "touMao": "T", "sex": 1, "oilSweat": "H", "weight": 70, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 63.3, "rfid": "1197", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716082501247/b1bdc3043e6c43599cfbaa88923c9022.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#f07c7c", "sex": "母", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 460, "y": -62.5, "layoutOrder": 0, "_order": 2 },
    { "id": "17978", "label": "牛编号: 1434", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "OM815", "cattleId": 1434, "hornType": "nothing", "wanQu": "W", "tiLength": "85", "leaveType": "one_leave", "xiDu": "70", "maoLength": 11, "maoCount": "10.6", "height": "81", "chest": "105", "density": "M", "touMao": "T", "sex": 0, "oilSweat": "H", "weight": 95, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 84.4, "rfid": "OM815", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716128133449/62e07de1ea7546d988e7eeeeba2a4271.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#2196f3", "sex": "公", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 140, "y": -300, "layoutOrder": 0, "_order": 0 },
    { "id": "18910", "label": "牛编号: 2366", "props": { "isStatus": 3, "uniformity": "Y", "orderNum": "81316", "cattleId": 2366, "hornType": "nothing", "wanQu": "W", "tiLength": "73", "leaveType": "extra_leave", "xiDu": "70", "maoLength": 10, "maoCount": "6.7", "height": "70", "chest": "85", "density": "M", "touMao": "T", "sex": 1, "oilSweat": "H", "weight": 47, "farmId": "1780420223883542528", "birthDate": "2023-03-09T16:00:00.000+00:00", "wrinkling": "L", "animalTypeId": "2023-03-09T16:00:00.000+00:00", "netWeight": 40.3, "rfid": "81316", "isSheep": 1, "imgList": ["/profile/upload/media/2024/5/19/1716082484713/ef98512ac1424e7f8540760348b746fe.jpg"] }, "img": "https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7", "type": "rect-jsx", "color": "#f07c7c", "sex": "母", "disc": "", "size": [200, 50], "anchorPoints": [[0, 0.5], [1, 0.5]], "labelCfg": { "position": "bottom", "style": { "fill": "#fff", "fontSize": 14 }, "offset": 30 }, "style": { "hover": { "fill": "lightsteelblue" }, "click": { "stroke": "#f00", "lineWidth": 2 }, "radius": 5, "stroke": "#69c0ff", "fill": "#ffffff", "lineWidth": 1, "fillOpacity": 1 }, "depth": 0, "x": 140, "y": -15, "layoutOrder": 0, "_order": 3 }
  ]
})


const muHuList = reactive([
  {
    nickName: '巴特尔',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '巴音',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '布和',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '那仁',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '牧仁',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '朝拉',
    phone: '121343333333',
    gender: '1',
    address: ''
  }
])

let chartData1 = reactive({ unit: '', data: [] })
let chartData2 = reactive({ x: [], data1: { name: '存栏', data: [] }, data2: { name: '免疫', data: [] } })
let chartData3 = reactive({ unit: '', x: [], y: [] })

onMounted(() => {
  initChart()
})

function initChart() {
  chartData1.unit = '亩'
  chartData1.data = [
    { name: '灌木草场', value: 1000 },
    { name: '芒草草场', value: 400 },
    { name: '人工灌浇草场', value: 300 },
    { name: '草场', value: 500 }
  ]

  chartData2.x = ['牛', '山羊', '绵羊', '猪'].reverse()
  chartData2.data1 = {
    name: '存栏',
    data: [56, 103, 67, 5].reverse()
  }
  chartData2.data2 = {
    name: '免疫',
    data: [30, 89, 48, 5].reverse()
  }

  chartData3.unit = '辆'
  chartData3.x = ['大型拖拉机', '小型拖拉机', '粉碎机', '播种机', '除草机'].reverse()
  chartData3.y = [1, 2, 2, 1, 3, 1].reverse()
}

function clickCattle(item) {
  // router.push(`/cattlePage`)
}

function changeGrowIndex(index) {
  growIndex.value = index
}

</script>

<style>
.c {
  background-color: #0F1427;
}
</style>